<template>
  <div class="all" v-loading="loading">
    <el-table :data="list">
      <el-table-column align="center" prop="tableName" label="表名"></el-table-column>
      <el-table-column align="center" prop="size" label="大小"></el-table-column>
      <el-table-column align="center" prop="free" label="碎片"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="submit(scope.row)">优化</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import {SqlList,SqlOptimize} from '@/utils/API'
  export default{
     inject:["reload"],
    data(){
      return{
        list:[],
        loading:true
      }
      },
      methods:{
        Postdata(){
          const data={
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token')
          }
          SqlList(data).then(res=>{
             res.data.forEach((val,keys)=>{
              var size =val.size/1024
              if(size>1024){val.size=size/1024+'Mb'}else{val.size=size+'Kb'}
             })
            this.list=res.data
            this.$nextTick(function(){
             this.loading=false
            })
          })
        },
        submit(e){
          const data={
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token'),
            tableName:e.tableName
          }
          SqlOptimize(data).then(res=>{
          if(res.code==0){
            this.$message.success('优化成功')
            this.reload()
          }  
          })
        }
      },

      mounted() {
        this.Postdata()
      }
      }
</script>

<style scoped>

  th{
    height: 30px;
    background: #eef3f7;
    border-bottom: 1px solid #d5dfe8;
    font-weight: normal;
  }
  tr{
    text-align: center;
  }
  td{
     border-bottom: 1px solid #d5dfe8;
     padding: 8px 0 0 8px;
  }
</style>
